<template>
  <div class="list-header">
    <ul>
      <li @click="goTO('recommend')">
        <span class="img">
          <img src="@/assets/iconImg/paper.png" alt="">
        </span>
        <div   class="content">
            <span class="font">
              推荐推送
            </span>
            <span class="i">
              >
            </span>
        </div>
      </li>
      <li @click="goTO('askOnline')">
        <span class="img">
          <img src="@/assets/iconImg/question.png" alt="">
        </span>
        <div class="content">
            <span class="font">
              在线提问
            </span>
            <span class="i">
              >
            </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "list",
  mounted() {
  },
  methods: {
    goTO(className){  
       this.$router.push('/'+className);
    },
  }
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/zyy_phone.css";
@import "../../assets/css/search.css";
.list-header {
  min-height:calc(100vh - 120px);
  background:#fff;
  overflow-x:hidden;
    ul{
      width: 100%;

      li {
        width:100%;
        height:45px;
        line-height:45px;
        padding:0 10px;
        .img {
          display: inline-block;
          width:32px;
          height:32px;
          img {
            width:100%;
            height:100%;
          }
        }
        .content {
          display: inline-block;
          height:100%;
          vertical-align: top;
          width:calc(100% - 60px);
          border-bottom:1px solid #ddd;
          position: relative;

          .font {
            width:calc(100% - 50px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
          }
          .i {
            position: absolute;
            right:0;
            color:#989898;
            font-size:20px;
          }
        }
      }

      li:nth-child(2) {
        img {
          width:25px;
          height:25px;
        }
      }
    }
}
</style>